<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery瀑布流布局 可拖拽交换元素DEMO演示</title>

<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/tuozhuai.js"></script>

<style type="text/css">
html,body,div,p,img,a{margin: 0 auto; padding: 0;}
html,body{ height: 100%;}
body{ padding:0px 20px; box-sizing: border-box;font-family: "微软雅黑"; font-size: 14px;}
.img_100 img{ width: 100%;max-width: 100%;}
.margin_bottom_15{margin-bottom: 15px;}
.text_center{ text-align: center;}
.drag_div{width: 1300px; height: 760px; overflow: hidden;  position: relative; }
.drag_div>div{ background: #fff; border-radius: 5px; padding: 10px; box-sizing: border-box; overflow: hidden;}
.drag_div>div.one{position: absolute;top:0;left:0; width: 20%; height: 240px;}
.drag_div>div.two{position: absolute;top:260px;left:0; width: 20%; height: 240px;}
.drag_div>div.three{position: absolute;top:520px;left:0; width: 20%; height: 240px;}
.drag_div>div.four{position: absolute;top:0px;left:21%; width: 37%; height: 760px; }
.drag_div>div.five{position: absolute;top:0px;left:59%; width: 20%; height: 280px;}
.drag_div>div.six{position: absolute;top:300px;left:59%; width: 20%; height: 220px;}
.drag_div>div.seven{position: absolute;top:540px;left:59%; width: 20%; height: 220px;}
.drag_div>div.eight{position: absolute;top:0px;left:80%; width: 20%; height: 280px;}
.drag_div>div.nine{position: absolute;top:300px;left:80%; width: 20%; height: 220px;}
.drag_div>div.ten{position: absolute;top:540px;left:80%; width: 20%; height: 220px;}

.drag_div>div.one img,.drag_div>div.two img,.drag_div>div.three img{ width: 100%; height: 180px;}
.drag_div>div.four img{width: 100%; height: 700px;}
.drag_div>div.five img,.drag_div>div.eight img{width: 100%; height: 220px;}
.drag_div>div.six img,.drag_div>div.seven img,.drag_div>div.nine img,.drag_div>div.ten img{width: 100%; height: 160px;}
</style>

</head>
<body style="background: #ddd;">
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="drag_div" id="drag_div">
	<div class="one"><p class="img_100 margin_bottom_15"><img src="images/wall1.jpg"></p><p class="text_center">我是第一张</p></div>
	<div class="two">
		<p class="img_100 margin_bottom_15"><img src="images/wall2.jpg"></p>
		<p class="text_center">我是第二张</p>
	</div>
	<div class="three">
		<p class="img_100 margin_bottom_15"><img src="images/wall3.jpg"></p>
		<p class="text_center">我是第三张</p>
	</div>
	<div class="four">
		<p class="img_100 margin_bottom_15"><img src="images/wall4.jpg"></p>
		<p class="text_center">我是第四张</p>
	</div>
	<div class="five">
		<p class="img_100 margin_bottom_15"><img src="images/wall5.jpg"></p>
		<p class="text_center">我是第五张</p>
	</div>
	<div class="six">
		<p class="img_100 margin_bottom_15"><img src="images/wall6.jpg"></p>
		<p class="text_center">我是第六张</p>
	</div>
	<div class="seven">
		<p class="img_100 margin_bottom_15"><img src="images/wall7.jpg"></p>
		<p class="text_center">我是第七张</p>
	</div>
	<div class="eight">
		<p class="img_100 margin_bottom_15"><img src="images/wall8.jpg"></p>
		<p class="text_center">我是第八张</p>
	</div>
	<div class="nine">
		<p class="img_100 margin_bottom_15"><img src="images/wall1.jpg"></p>
		<p class="text_center">我是第九张</p>
	</div>
	<div class="ten">
		<p class="img_100 margin_bottom_15"><img src="images/wall2.jpg"></p>
		<p class="text_center">我是第十张</p>
	</div>
</div>
</body>
</html>


